@import url('../../style.less');

page {
  font-family: @ff-1;
  // background-color: @bgc-1;
  padding: 40rpx 0;
}

.main-container {
  .time {
    display: flex;
    margin-bottom: 30rpx;
    padding: 0 40rpx 30rpx 40rpx;
    border-bottom: solid 20rpx @bc-1;

    .desc {
      font-weight: bold;
      color: @fc-2;
      font-size: 32rpx;
      margin-top: 60rpx;
      margin-right: 20rpx;
    }

    .minute,
    .second {
      display: block;
      background-color: @bgc-25;
      padding: 10px 20px;
      color: #fff;
      line-height: 1.0;
      font-size: 70rpx;
      border-radius: 10rpx;
      font-weight: bold;
    }

    .unit {
      font-size: 32rpx;
      margin-left: 20rpx;
      margin-right: 20rpx;
      font-weight: bold;
      color: @fc-2;
      margin-top: 60rpx;
    }

    .red {
      background-color: #f56c6c;
    }
  }

  .title {
    font-size: 38rpx;
    font-weight: bold;
    color: @fc-2;
    margin-bottom: 40rpx;
    padding: 0 40rpx;
  }

  .files {
    padding: 0 40rpx;
  }

  .operate {
    display: flex;
    margin-top: 30rpx;
    padding: 0 40rpx;

    .btn {
      flex-grow: 1;
      color: #fff;
      font-size: 28rpx;
      margin: 0;
      padding: 17rpx 0;
      line-height: 2;
      text-align: center;
      border-radius: 10rpx;
    }

    .green {
      background-color: @btnc-7;

      &:active {
        background-color: @btnac-7;
      }
    }

    .red {
      margin-right: 30rpx;
      background-color: @btnc-3;

      &:active {
        background-color: @btnac-3;
      }
    }

    .gray {
      background-color: @btnc-8;
    }
  }
}

.desc-container {
  padding: 0 40rpx;
  margin-top: 60rpx;

  .title {
    font-size: 38rpx;
    font-weight: bold;
    color: @fc-2;
    margin-bottom: 40rpx;
  }

  .desc {
    display: flex;
    margin-top: 20rpx;

    .num {
      margin-right: 10rpx;
    }

    text {
      font-size: 24rpx;
      color: @fc-3;
      line-height: 1.7;
    }
  }
}
